<template>
  
<div class="login">

    <!-- 用于显示名字 -->
    <div class="header">
        <p class="title">Welcome to CUHK NoteWave</p>
    </div>

    <!-- 内容 -->
    <div class="content">
        <!-- 放图片 -->
        <!-- <div class="content-left">
            <img src="../assets/image/loginbg.png" class="img-bg">
        </div> -->
        <!-- 放表单 -->
        <div class="content-right">
            <!-- 注册 -->
            <div class="content-right-title">regeister</div>
            <form action="">
                <div class="user-name" style="margin-top: 20px;">                    
                    <el-icon><Avatar /></el-icon>
                    <el-input placeholder="username" name="username" type="text" v-model="form.username" @blur="handleInput"/>
                </div>
                <div class="user-name" style="margin-top: 20px;">                    
                    <el-icon><Avatar /></el-icon>
                    <el-input placeholder="personname" name="personname" type="text" v-model="form.personname"/>
                </div>
                <div class="user-pass" style="margin-top: 20px;">     
                   <el-icon><Lock /></el-icon>
                    <el-input placeholder="password" name="password" type="password" v-model="form.password" />
                </div>  
                <div class="user-pass" style="margin-top: 20px;">     
                   <el-icon><Iphone /></el-icon>
                    <el-input placeholder="phone" name="phone" type="text" v-model="form.phone" />
                </div> 
                <div class="user-pass" style="margin-top: 20px;">     
                   <el-icon><OfficeBuilding /></el-icon>
                    <el-input placeholder="credentials" name="credentials" type="text" v-model="form.credentials" />
                </div>   
                <div class="user-pass" style="margin-top: 20px;">    
                  <el-checkbox-group v-model="checkedValues">
                    <el-checkbox :label="item.rolename" :value="item.id" v-for="(item, index) in roledata.list" style="margin-right:5px;"/>
                  </el-checkbox-group>
                </div>           
            </form>
            <!-- 注册，忘记密码 -->
            
            <div class="register">
                <div class="tip"></div>
                <a class="register-a" href="/#/">login</a>
            </div>
            <!-- 注册按钮 -->
            <div class="register-button">
                <!-- <input type="button" @click="doSubmit" value="Login" class="btn btn-primary register-button-btn"> -->
                <el-button type="primary" @click="doSubmit" style="width:100%">Regeister</el-button>
            </div>
        </div>
    </div>
    
    <!-- 底部信息 -->
    <div class="footer">
    
    </div>
</div>
</template>
<script setup>
import { reactive,ref,onMounted} from 'vue'
import { checkUsername,regeister,getRoleList } from '../api/user'
import { ElNotification } from 'element-plus'

const checkedValues = ref([]);

const form = reactive({
  username: '',
  personname: '',
  password: '',
  phone:'',
  credentials:''
})
const roledata = reactive({
  list:[]
})
const tips = reactive({
  msg: ''
})

onMounted(() => {
  loaddata();
})

function loaddata()
{
  getRoleList().then((res) => {
    if (res.code == 200)
    {
      roledata.list = res.data;
    }
  })
}

function handleInput(event) {
  // 输入完成后的逻辑处理
  if (form.username == '')
  {

  }
  else
  {  
    checkUsername({"username":form.username}).then((res) => {    
    })
  }
}

function doSubmit() {
  if (form.username == '' || form.password == '')
  {
    ElNotification.success({
        title: 'tips',
        message: 'please enter username and password',
      })
      return ;
  }
  if (checkedValues.value.length < 1)
  {
    ElNotification.success({
        title: 'tips',
        message: 'please select a role',
      })
      return ;
  } 
  console.log(checkedValues.value)
  const regdata = {"username":form.username,"password":form.password,"phone":form.phone,"credentials":form.credentials,roleList:checkedValues.value};
  regeister(regdata).then((res) => {
    if (res.code == 200)
    {
      ElNotification.success({
        title: 'tips',
        message: res.msg,
      })
    }
  })
}
</script>
<style lang="less" scoped>
/* 初始配置 */
* {
  margin: 0;
  padding: 0;
}
ul,ol {
  list-style: none;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
h1,h2,h3 {
  font-size: 16px;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}

/* 浮动 */
.l {
  float: left;
}
.r {
  float: right;
}
.clear::after {
  content:"";
  display: block;
  clear: both;
}

/* 版心 */
.container {
  width: 1080px;
  margin: 0 auto;
  position: relative;
}
/* 通栏 */
.container-fluid {
  width: 100%;
}

/* 页面配置 */
.login {
    height: 1009px;
}
.header {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content:center;
}
.title {
    font-size: 33px;
    color: rgba(0, 0, 0, .85);
    font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    position: relative;
    top: 75px;
}

.content {
    margin: 0 auto;
    width: 1000px;
    height: auto;
    background: #f0f2f5;
    border-radius: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center; 
}
.img-bg {
    height: 480;
    width: 533px;
}
.content-left {
    height: 100%;
    display: flex;
    align-items:center;
}
.content-right {
    width: 400px;
    height: 100%;
    margin-top:50px;
    padding: 30px;
}
.content-right-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}
.user-yzm {
    display: flex;

}
.img-yzm {
    height: 40px;
    margin-right: 0px;
    margin-left: 10px;
}

/* 登录 */
.register {
    margin-top: 0px;
    line-height: 60px;
    // display: flex;
    // flex-direction: row-reverse;
}
.register-a {
    margin-right: 0px;
    float:right;
    text-align: right;
    width: 50%;
}
.register-button {
    line-height: 1.499;
    font-weight: 400;
    width: 100%;
    margin-top: 20px;
}
.register-button-btn {
    width: 100%;
    border-radius: 7px;
}
.tip {
    margin: 0;
    // padding: 20px;
    float:left;
    height: 30px;
    width: 50%;
    color: red;
}
</style>